<template>
  <div class="singer">
    <div class="title tanxin">
      <span>入驻歌手</span>
      <a href="#" class="more">查看全部></a>
    </div>

    <ul class="singer_list">
      <li v-for="(item,index) in SongerArr" :key="index" @click="$router.push(`/artlist/${item.id}`)">
        <img :src="item.img1v1Url" alt="" />
        <div class="content">
          <div class="head ellipsis">{{item.name}}</div>
          <div class="info ellipsis">{{item.alias[0]}}</div>
        </div>
      </li>
    </ul>

    <div class="btn">
      <a href="javascript:;">申请成为云音乐人</a>
    </div>

    <div class="title tanxin">
      <span>热门主播</span>
    </div>

    <ul class="zhubo">
      <li>
        <img src="../../assets/images/music_bg/zhubo1.jpg" alt="" />
        <div class="info ellipsis">
          <h3>成立</h3>
          <p class="ellipsis">心理学家、美食家陈立教授</p>
        </div>
      </li>
      <li>
        <img src="../../assets/images/music_bg/zhubo2.jpg" alt="" />
        <div class="info ellipsis">
          <h3>刘维-Julius</h3>
          <p class="ellipsis">歌手、播客节目《维维道来》主理人</p>
        </div>
      </li>
      <li>
        <img src="../../assets/images/music_bg/zhubo3.jpg" alt="" />
        <div class="info ellipsis">
          <h3>莫非定律MoreFeel</h3>
          <p class="ellipsis">男女双人全创作独立乐团</p>
        </div>
      </li>
      <li>
        <img src="../../assets/images/music_bg/zhubo4.jpg" alt="" />
        <div class="info ellipsis">
          <h3>碎嘴许美达</h3>
          <p class="ellipsis">脱口秀网络红人</p>
        </div>
      </li>
      <li>
        <img src="../../assets/images/music_bg/zhubo5.jpg" alt="" />
        <div class="info ellipsis">
          <h3>银临Rachel</h3>
          <p class="ellipsis">歌手，音乐达人</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { SongerApi } from "@/request/api";
export default {
  data() {
    return {
      SongerArr: "",
    };
  },
  created() {
    SongerApi().then((res) => {
      // console.log(res);
      this.SongerArr = res.data.artists;
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.singer {
  border-top: 1px solid #b2b2b2;
  .title {
    height: 23px;
    margin: 20px;
    border-bottom: 1px solid #ccc;
    span {
      font-size: 12px;
      font-weight: bold;
    }
    a {
      font-size: 12px;
      color: #666666;
    }
  }
  .singer_list {
    margin: auto 20px;
    li {
      cursor: pointer;
      display: flex;
      margin-bottom: 15px;
      border: 1px solid #d3d3d3;
      background: #f5f5f5;
      img {
        width: 62px;
        height: 62px;
      }
      .content {
        padding-left: 15px;
        padding-right: 20px;
        .head {
          font-size: 14px;
          font-weight: bold;
          padding-top: 10px;
        }
        .info {
          font-size: 12px;
          color: #666666;
          padding-top: 15px;
        }
      }
      &:hover {
        background: #e8e8e8;
      }
    }
  }
  .btn {
    cursor: pointer;
    margin: 20px;
    background: linear-gradient(#fff, #d3d3d3);
    border: 2px solid #d3d3d3;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    a {
      color: #000;
      font-size: 12px;
      font-weight: bold;
    }
    &:hover {
      background: #fff;
    }
  }
  .zhubo {
    margin: auto 20px;
    li {
      display: flex;
      padding-bottom: 10px;
      img {
        cursor: pointer;
      }
      .info {
        padding-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        h3 {
          font-size: 12px;
          color: #000;
          &:hover {
            cursor: pointer;
            text-decoration: underline;
          }
        }
        p {
          font-size: 12px;
          color: #666666;
        }
      }
    }
  }
}
</style>